@import 'chartist-settings';

.ct-series(@len) when (@len > 0) {
    @tmp: extract(@ct-series-names, @len);
    @color: extract(@ct-series-colors, @len);

    .ct-series(@len - 1); // recursion

    &.ct-series-@{tmp} {
        .ct-chart-series-color(@color); // called above mixin
    }
}

.generate-ct-scales-names(@len) when (@len > 0) {
    @name: extract(@ct-scales-names, @len);
    @ratio: extract(@ct-scales, @len);

    .generate-ct-scales-names(@len - 1); // recursion

    &.@{name} {
        .ct-responsive-svg-container(@ratio: @ratio);
    }
}

.ct-responsive-svg-container(@width: 100%; @ratio: @ct-container-ratio) {
    display: block;
    position: relative;
    width: @width;

    &:before {
        display: block;
        float: left;
        content: "";
        width: 0;
        height: 0;
        padding-bottom: @ratio * 100%;
    }

    &:after {
        content: "";
        display: table;
        clear: both;
    }

    > svg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.ct-align-justify(@ct-text-align: @ct-text-align; @ct-text-justify: @ct-text-justify) {
    -webkit-box-align: @ct-text-align;
    -webkit-align-items: @ct-text-align;
    -ms-flex-align: @ct-text-align;
    align-items: @ct-text-align;
    -webkit-box-pack: @ct-text-justify;
    -webkit-justify-content: @ct-text-justify;
    -ms-flex-pack: @ct-text-justify;
    justify-content: @ct-text-justify;

    text-align: center;
    & when (@ct-text-justify = 'flex-start') {
        text-align: left;
    }
    
    & when (@ct-text-justify = 'flex-end') {
        text-align: right;
    }
}

.ct-flex() {
// Fallback to block
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.ct-chart-label(@ct-text-color: @ct-text-color; @ct-text-size: @ct-text-size; @ct-text-line-height: @ct-text-line-height) {
    fill: @ct-text-color;
    color: @ct-text-color;
    font-size: @ct-text-size;
    line-height: @ct-text-line-height;
}

.ct-chart-grid(@ct-grid-color: @ct-grid-color; @ct-grid-width: @ct-grid-width; @ct-grid-dasharray: @ct-grid-dasharray) {
    stroke: @ct-grid-color;
    stroke-width: @ct-grid-width;

    & when (@ct-grid-dasharray) {
        stroke-dasharray: @ct-grid-dasharray;
    }
}

.ct-chart-point(@ct-point-size: @ct-point-size; @ct-point-shape: @ct-point-shape) {
    stroke-width: @ct-point-size;
    stroke-linecap: @ct-point-shape;
}

.ct-chart-line(@ct-line-width: @ct-line-width; @ct-line-dasharray: @ct-line-dasharray) {
    fill: none;
    stroke-width: @ct-line-width;

    & when (@ct-line-dasharray) {
        stroke-dasharray: @ct-line-dasharray;
    }
}

.ct-chart-area(@ct-area-opacity: @ct-area-opacity) {
    stroke: none;
    fill-opacity: @ct-area-opacity;
}

.ct-chart-bar(@ct-bar-width: @ct-bar-width) {
    fill: none;
    stroke-width: @ct-bar-width;
}

.ct-chart-donut(@ct-donut-width: @ct-donut-width) {
    fill: none;
    stroke-width: @ct-donut-width;
}

.ct-chart-series-color(@color) {
    .@{ct-class-point}, .@{ct-class-line}, .@{ct-class-bar}, .@{ct-class-slice-donut} {
        stroke: @color;
    }

    .@{ct-class-slice-pie}, .@{ct-class-area} {
        fill: @color;
    }
}

.ct-chart(@ct-container-ratio: @ct-container-ratio; @ct-text-color: @ct-text-color; @ct-text-size: @ct-text-size; @ct-grid-color: @ct-grid-color; @ct-grid-width: @ct-grid-width; @ct-grid-dasharray: @ct-grid-dasharray; @ct-point-size: @ct-point-size; @ct-point-shape: @ct-point-shape; @ct-line-width: @ct-line-width; @ct-bar-width: @ct-bar-width; @ct-donut-width: @ct-donut-width; @ct-series-names: @ct-series-names; @ct-series-colors: @ct-series-colors) {

    .@{ct-class-label} {
        .ct-chart-label(@ct-text-color, @ct-text-size);
    }

    .@{ct-class-chart-line} .@{ct-class-label},
    .@{ct-class-chart-bar} .@{ct-class-label} {
        .ct-flex;
    }

    .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-start} {
        .ct-align-justify(flex-end, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-end} {
        .ct-align-justify(flex-start, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-label}.@{ct-class-vertical}.@{ct-class-start} {
        .ct-align-justify(flex-end, flex-end);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: end;
    }

    .@{ct-class-label}.@{ct-class-vertical}.@{ct-class-end} {
        .ct-align-justify(flex-end, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-chart-bar} .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-start} {
        .ct-align-justify(flex-end, center);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-chart-bar} .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-end} {
        .ct-align-justify(flex-start, center);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-chart-bar}.@{ct-class-horizontal-bars} .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-start} {
        .ct-align-justify(flex-end, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-chart-bar}.@{ct-class-horizontal-bars} .@{ct-class-label}.@{ct-class-horizontal}.@{ct-class-end} {
        .ct-align-justify(flex-start, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: start;
    }

    .@{ct-class-chart-bar}.@{ct-class-horizontal-bars} .@{ct-class-label}.@{ct-class-vertical}.@{ct-class-start} {
        //.ct-chart-label(@ct-text-color, @ct-text-size, center, @ct-vertical-text-justify);
        .ct-align-justify(center, flex-end);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: end;
    }

    .@{ct-class-chart-bar}.@{ct-class-horizontal-bars} .@{ct-class-label}.@{ct-class-vertical}.@{ct-class-end} {
        .ct-align-justify(center, flex-start);
        // Fallback for browsers that don't support foreignObjects
        text-anchor: end;
    }

    .@{ct-class-grid} {
        .ct-chart-grid(@ct-grid-color, @ct-grid-width, @ct-grid-dasharray);
    }

    .@{ct-class-point} {
        .ct-chart-point(@ct-point-size, @ct-point-shape);
    }

    .@{ct-class-line} {
        .ct-chart-line(@ct-line-width);
    }

    .@{ct-class-area} {
        .ct-chart-area();
    }

    .@{ct-class-bar} {
        .ct-chart-bar(@ct-bar-width);
    }

    .@{ct-class-slice-donut} {
        .ct-chart-donut(@ct-donut-width);
    }

    //====== chart series
    & when (@ct-include-colored-series) {
        .ct-series {
            .ct-series(length(@ct-series-names));
        }
    }

}

& when (@ct-include-classes) {
    .ct-chart;

    & when (@ct-include-alternative-responsive-containers = true) {
        .generate-ct-scales-names(length(@ct-scales-names));
    }
}